<template>
  <d2-container class="menu-content">
    <div class="menu-des"><label>目前只支持两级分类</label></div>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText" class="menu-content-query">
    </el-input>
    <div class="menu-top-class">
      <el-button type="primary" style="font-size: 14px;" @click="addMenuTop">添加顶级分类</el-button>
    </div>
    <el-tree
      class="filter-tree"
      :data="data2"
      :props="defaultProps"
      default-expand-all
      ref="tree2"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
    <el-dialog
      title="分类信息"
      :visible.sync="dialogVisible"
      width="600px">
      <el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
        <div>
          <el-form ref="loginForm" label-position="top" :rules="rules" :model="formMenu" size="default">
            <el-form-item prop="parentId">
              <el-input :disabled="true" type="text" v-model="formMenu.parentId" placeholder="上级">
                <i slot="prepend" class="fa fa-key"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="title">
              <el-input type="text" v-model="formMenu.title" placeholder="名称">
                <i slot="prepend" class="fa fa-info-circle"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="path">
              <el-input type="text" v-model="formMenu.path" placeholder="路径">
                <i slot="prepend" class="fa fa-chain"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="icon">
              <el-input type="text" v-model="formMenu.icon" placeholder="图标">
                <i slot="prepend" class="fa fa-ils"></i>
              </el-input>
            </el-form-item>
            <el-button size="default" @click="submit" type="primary" class="button-login">提交</el-button>
          </el-form>
        </div>
      </el-row>
    </el-dialog>
  </d2-container>
</template>

<script>
import { LoadMenu, addMenu, updateMenu, delMenu } from '@api/sys.menu'
export default {
  watch: {
    filterText (val) {
      this.$refs.tree2.filter(val)
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) {
        return true
      }
      return data.title.indexOf(value) !== -1
    },
    loadMenuList () {
      LoadMenu().then(async res => {
        this.data2 = res
      }).catch(err => {
        console.log('err: ', err)
      })
    },
    append (data) {
      if (data.level === 2) {
        return
      }
      this.isAdd = true
      this.formMenu.level = data.level + 1
      this.formMenu.parentId = data.id
      this.formMenu.title = ''
      this.formMenu.icon = ''
      this.formMenu.path = ''
      this.formMenu.type = 1
      this.dialogVisible = true
    },
    modify (data) {
      this.isAdd = false
      this.formMenu.id = data.id
      this.formMenu.sort = data.sort
      this.formMenu.parentId = data.parentId
      this.formMenu.title = data.title
      this.formMenu.path = data.path
      this.formMenu.icon = data.icon
      this.formMenu.level = data.level
      this.dialogVisible = true
    },
    remove (node, data) {
      let vm = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delMenu(data.id).then(async res => {
          vm.loadMenuList()
        }).catch(err => {
          console.info(err)
          vm.$message({
            type: 'info',
            message: '删除数据异常'
          })
        })
      })
    },
    addMenuTop () {
      this.isAdd = true
      this.formMenu.level = 1
      this.formMenu.sort = 1
      this.dialogVisible = true
    },
    renderContent (h, { node, data, store }) {
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
            <span style="margin-left:8px;">
              <d2-icon name={data.icon}/>
            </span>
            <span>
              <label style="margin-left:20px;">ID:{data.id}</label>
            </span>
            <span>
              <label style="margin-left:20px;">路径:{data.path}</label>
            </span>
          </span>
          <span>
            <el-button type="primary" plain size="mini" style="font-size: 12px;" on-click={ () => this.append(data) }>添加</el-button>
            <el-button type="warning" plain size="mini" style="font-size: 12px;" on-click={ () => this.modify(data) }>修改</el-button>
            <el-button type="warning" plain size="mini" style="font-size: 12px;" on-click={ () => this.remove(node, data) }>删除</el-button>
          </span>
        </span>)
    },
    submit () {
      if (this.isAdd) {
        addMenu(this.formMenu).then(async res => {
          this.dialogVisible = false
          this.loadMenuList()
        }).catch(err => {
          console.log('err: ', err)
        })
      } else {
        updateMenu(this.formMenu).then(async res => {
          this.dialogVisible = false
          this.loadMenuList()
        }).catch(err => {
          console.log('err: ', err)
        })
      }
    }
  },

  data () {
    return {
      filterText: '',
      formMenu: {
        title: '',
        path: '',
        icon: '',
        level: 1,
        sort: 1,
        parentId: 0,
        type: 1,
        id: null
      },
      // 校验
      rules: {
        title: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        path: [
          { required: false, message: '请输入分类路径', trigger: 'blur' }
        ],
        icon: [
          { required: false, message: '请输入分类图标', trigger: 'blur' }
        ]
      },
      data2: [],
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      isAdd: true
    }
  },
  mounted () {
    this.loadMenuList()
  }
}
</script>

<style lang="scss">
.menu-content {
  @extend %unable-select;
  $backgroundColor: #F0F2F5;
  // ---
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 20px;
  background-color: $backgroundColor;
  .menu-top-class {
    margin-top: 10px;
  }
  .menu-des {
    color: #909399;
    margin-left: 10px;
  }
  .menu-content-query {
    margin-top:10px;
  }
  .filter-tree {
    margin-top: 20px;
    padding: 20px;
  }
  .el-tree-node__content {
    height: 36px;
  }
}
</style>
